<!doctype html>
<html class="no-js" lang="en">
<!--<![endif]-->
<head>
<meta name="layout" content="common">
<title>Report</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
	google.load('visualization', '1', {
		packages : [ 'corechart' ]
	});
</script>
<script type="text/javascript">
	function drawVisualization() {
		// Some raw data (not necessarily accurate)
		var data = google.visualization.arrayToDataTable([
				[ 'Month', 'Bolivia', 'Ecuador', 'Madagascar',
						'Papua New Guinea', 'Rwanda', 'Average' ],
				[ '2004/05', 165, 938, 522, 998, 450, 614.6 ],
				[ '2005/06', 135, 1120, 599, 1268, 288, 682 ],
				[ '2006/07', 157, 1167, 587, 807, 397, 623 ],
				[ '2007/08', 139, 1110, 615, 968, 215, 609.4 ],
				[ '2008/09', 136, 691, 629, 1026, 366, 569.6 ] ]);

		var options = {
			title : 'Monthly Coffee Production by Country',
			vAxis : {
				title : "Cups"
			},
			hAxis : {
				title : "Month"
			},
			seriesType : "bars",
			series : {
				5 : {
					type : "line"
				}
			}
		};

		var chart = new google.visualization.ComboChart(document
				.getElementById('chart_div'));
		chart.draw(data, options);
	}
	google.setOnLoadCallback(drawVisualization);
</script>

</head>
<body>
	<h2>My Profile</h2>
	<hr />
	<div class="row>">
		<div class="span2">
			<h3>Criteria</h3>
			<br /> <b>Cards</b>
			<table class="table table-striped">
				<tr>
					<td><input type="checkbox" /> HSBC - Revolution</td>
				</tr>
				<tr>
					<td><input type="checkbox" /> SCB - Manhattan</td>
				</tr>
				<tr>
					<td><input type="checkbox" /> Citibank - M1</td>
				</tr>
			</table>
			<br /> <b>Report Date (Within 3 months)</b>
			<table class="table table-striped">
				<tr>
					<td><input type="text" class="span2" placeholder="Start Date" /></td>
				</tr>
				<tr>
					<td><input type="text" class="span2" placeholder="End Date" /></td>
				</tr>
			</table>
			<br /> <b>Report type</b>
			<form>
				<table class="table table-striped">
					<tr>
						<td><input type="radio" /> Card Spending</td>
					</tr>
					<tr>
						<td><input type="radio" /> Monthly Spending</td>
					</tr>
					<tr>
						<td><input type="radio" /> Category Spending</td>
					</tr>
				</table>
			</form>
		</div>
		<div class="span6">
			<h3>Charts</h3>
			<div id="chart_div" style="height: 400px;"></div>
		</div>
	</div>
</body>
</html>